import { StyleSheet, Button, Image, ScrollView, TouchableOpacity } from 'react-native'
import * as React from 'react';
import { ThemedText } from '@/components/ThemedText'
import { ThemedView } from '@/components/ThemedView'
import { useRouter } from 'expo-router'
import { Searchbar } from 'react-native-paper';
import { SafeAreaView, View } from 'react-native';
import useResponsive from '@/rem/rem';
import Carousel from '../shopping/brand';
import { image_list, image_list2, image_list3, Health, Supplies, snacks } from '@/mock/Carousel'

export default function MallScreen() {
  const { w, h } = useResponsive()
  const router = useRouter()
  const [image, setImages] = React.useState([])
  const [image2, setImages2] = React.useState([])
  const [image3, setImages3] = React.useState([])
  const [health, setHealth] = React.useState([])
  const [supplies, seSupplies] = React.useState([])
  const [Snacks, setsnacks] = React.useState([])
  React.useEffect(() => {
    console.log('MallScreen', image_list.data);
    setImages(image_list.data)
    setImages2(image_list2.data)
    setImages3(image_list3.data)
    setHealth(Health.data)
    seSupplies(Supplies.data)
    setsnacks(snacks.data)
    console.log('ima', image);
  }, [])

  const [searchQuery, setSearchQuery] = React.useState('');
  const images = [
    { image: 'https://img.ixintu.com/download/jpg/201911/8e37efaa03d24f2a16da82e8051ee70e.jpg!con' },
    { image: 'https://img.zcool.cn/community/01ef3c5eef1b97a801206621f94f12.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/quality,q_100' },
    { image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.n7nltUrr2mwAtLWy1J9JRgHaEK?w=301&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7' },
  ];

  return (

    <ThemedView>
      <ScrollView >
        {/* 搜索框 */}
        <ThemedView style={{ position: 'relative', justifyContent: 'center', alignItems: 'center', width: '100%', marginTop: 2, marginBlockEnd: 1 }}>
          <Searchbar
            placeholder="Search"
            onChangeText={setSearchQuery}
            value={searchQuery}
            style={{ width: '95%', height: h(30), marginTop: 1 }}
            inputStyle={{ fontSize: 14, position: 'absolute', top: -10, left: 40 }}
          />
        </ThemedView>
        {/* 轮播图 */}
        <SafeAreaView>
          <Carousel data={images} />
        </SafeAreaView>
        {/* 创建一个flex布局的容器 */}
        <ThemedView style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row', width: '100%', marginTop: 10 }}>
          <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} >
            <Image source={require('../shopping/static/新手礼包.png')} style={{ width: w(30), height: h(30), resizeMode: 'cover' }} />
            <ThemedText style={{ fontSize: 12 }} onPress={() => router.push('/shopping/gift')}>新手礼</ThemedText>
          </ThemedView>
          <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Image source={require('../shopping/static/主粮.png')} style={{ width: w(30), height: h(30), resizeMode: 'cover' }} />
            <ThemedText style={{ fontSize: 12 }}>主粮</ThemedText>
          </ThemedView>
          <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Image source={require('../shopping/static/零食.png')} style={{ width: w(30), height: h(30), resizeMode: 'cover' }} />
            <ThemedText style={{ fontSize: 12 }}>零食</ThemedText>
          </ThemedView>
          <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Image source={require('../shopping/static/用品.png')} style={{ width: w(30), height: h(30), resizeMode: 'cover' }} />
            <ThemedText style={{ fontSize: 12 }}>用品</ThemedText>
          </ThemedView>
          <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Image source={require('../shopping/static/保健.png')} style={{ width: w(30), height: h(30), resizeMode: 'cover' }} />
            <ThemedText style={{ fontSize: 12 }}>保健</ThemedText>
          </ThemedView>
        </ThemedView>
        <ThemedView style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row', width: '100%', marginTop: 20 }}>
          <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'left' }}>
            <ThemedText style={{ fontWeight: 600, marginLeft: 10 }}>养宠套餐</ThemedText>
            <ThemedText style={{ color: 'red', marginLeft: 10 }}>养宠顾问私人定制</ThemedText>
            <ThemedView style={{ justifyContent: 'left', alignItems: 'center', flexDirection: 'row', width: '100%' }}>
              {
                image.map((item) => {
                  return (
                    <Image key={item.id} source={{ uri: item.src }} style={{ width: w(80), height: h(80), marginLeft: 10, resizeMode: 'cover' }} />
                  )
                })
              }
            </ThemedView>
          </ThemedView>
          <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'left' }}>
            <ThemedText style={{ fontWeight: 600, marginLeft: 10 }}>会员福利</ThemedText>
            <ThemedText style={{ color: 'red', marginLeft: 10 }}>网易严选高性价比</ThemedText>
            <ThemedView style={{ justifyContent: 'left', alignItems: 'center', flexDirection: 'row', width: '100%' }}>
              {
                image.map((item) => {
                  return (
                    <Image key={item.id} source={{ uri: item.src }} style={{ width: w(80), height: h(80), marginLeft: 10, resizeMode: 'cover' }} />
                  )
                })
              }
            </ThemedView>
          </ThemedView>
        </ThemedView>

        {/* 品牌 */}
        <ThemedView>
          <ThemedView style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', width: '100%', marginTop: 20 }}>
            <ThemedText style={{ fontWeight: 700, marginLeft: 10 }}>品牌</ThemedText>
            <ThemedText style={{ marginRight: 10 }}>查看所有产品 &gt;</ThemedText>
          </ThemedView>
        </ThemedView>
        <ThemedView style={{ marginLeft: 10, marginRight: 10 }}>
          <ThemedView style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', width: '100%', marginTop: 10, flexWrap: 'wrap' }}>
            <ThemedView style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-around' }}>
              {
                image2.map((item, index) => {
                  return (
                    <ThemedView key={item.id} style={{ alignItems: 'center', marginHorizontal: 5, width: '20%' }}>
                      <Image source={{ uri: item.src }} style={{ width: '100%', aspectRatio: 1, resizeMode: 'cover', marginTop: 10 }} />
                      <ThemedText>{item.title}</ThemedText>
                    </ThemedView>
                  )
                })
              }
            </ThemedView>
          </ThemedView>
        </ThemedView>

        {/* 主粮 */}
        <ThemedView >
          <ThemedView style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', width: '100%', marginTop: 20 }}>
            <ThemedText style={{ fontWeight: 700, marginLeft: 10 }}>主粮</ThemedText>
            <ThemedText style={{ marginRight: 10 }}>更多 &gt;</ThemedText>
          </ThemedView>
        </ThemedView>
        <ThemedView style={{ marginLeft: 10, marginRight: 10 }}>
          <ThemedView style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', width: '100%', marginTop: 10 }}>
            {
              image3.map((item, index) => (
                <TouchableOpacity
                  key={index}
                  onPress={() => router.push(`/info?item=${encodeURIComponent(JSON.stringify(item))}`)}
                  activeOpacity={1} // 设置为1以避免透明度变化
                  style={{ width: '45%', alignItems: 'center', marginHorizontal: 5, marginBottom: 10 }}
                >
                  <ThemedView key={item.id} style={{ width: '100%', alignItems: 'left', marginHorizontal: 5, marginBottom: 10 }}>
                    <Image source={{ uri: item.src }} style={{ width: '100%', aspectRatio: 0.8, resizeMode: 'cover', marginTop: 10 }} />
                    <ThemedText style={{ fontSize: 10 }}>{item.title}</ThemedText>
                    <ThemedView style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'left', alignItems: 'center', width: '90%', marginTop: 5 }}>
                      <ThemedText style={{ fontSize: 10, color: 'red', textAlign: 'left' }}>￥{item.price} 【会员价】</ThemedText>
                      <ThemedText style={{ color: 'gray', textDecorationLine: 'line-through' }}>￥{item.sale}</ThemedText>
                    </ThemedView>
                  </ThemedView>
                </TouchableOpacity>
              ))
            }
          </ThemedView>
        </ThemedView>
        {/* 零食 */}
        <ThemedView>
          <ThemedView style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', width: '100%', marginTop: 20 }}>
            <ThemedText style={{ fontWeight: 700, marginLeft: 10 }}>零食</ThemedText>
            <ThemedText style={{ marginRight: 10 }}>更多 &gt;</ThemedText>
          </ThemedView>
        </ThemedView>
        <ThemedView style={{ marginLeft: 10, marginRight: 10 }}>
          <ThemedView style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', width: '100%', marginTop: 10 }}>
            {
              Snacks.map((item, index) => (
                <TouchableOpacity
                  key={index}
                  onPress={() => router.push(`/info?item=${encodeURIComponent(JSON.stringify(item))}`)}
                  activeOpacity={1} // 设置为1以避免透明度变化
                  style={{ width: '45%', alignItems: 'center', marginHorizontal: 5, marginBottom: 10 }}
                >
                  <ThemedView key={item.id} style={{ width: '100%', alignItems: 'center', marginHorizontal: 5, marginBottom: 10 }}>
                    <Image source={{ uri: item.src }} style={{ width: '100%', aspectRatio: 0.8, resizeMode: 'cover', marginTop: 10 }} />
                    <ThemedText style={{ fontSize: 10 }}>{item.title}</ThemedText>
                    <ThemedView style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'left', alignItems: 'center', width: '90%', marginTop: 5 }}>
                      <ThemedText style={{ fontSize: 10, color: 'red', textAlign: 'left' }}>￥{item.price} 【会员价】</ThemedText>
                      <ThemedText style={{ color: 'gray', textDecorationLine: 'line-through' }}>￥{item.sale}</ThemedText>
                    </ThemedView>
                  </ThemedView>
                </TouchableOpacity>
              ))
            }
          </ThemedView>
        </ThemedView>
        {/* 保健品 */}
        <ThemedView>
          <ThemedView style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', width: '100%', marginTop: 20 }}>
            <ThemedText style={{ fontWeight: 700, marginLeft: 10 }}>保健品</ThemedText>
            <ThemedText style={{ marginRight: 10 }}>更多 &gt;</ThemedText>
          </ThemedView>
        </ThemedView>
        <ThemedView style={{ marginLeft: 10, marginRight: 10 }}>
          <ThemedView style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', width: '100%', marginTop: 10 }}>
            {
              health.map((item, index) => (
                <TouchableOpacity
                  key={index}
                  onPress={() => router.push(`/info?item=${encodeURIComponent(JSON.stringify(item))}`)}
                  activeOpacity={1} // 设置为1以避免透明度变化
                  style={{ width: '45%', alignItems: 'center', marginHorizontal: 5, marginBottom: 10 }}
                >
                  <ThemedView key={item.id} style={{ width: '100%', alignItems: 'center', marginHorizontal: 5, marginBottom: 10 }}>
                    <Image source={{ uri: item.src }} style={{ width: '100%', aspectRatio: 0.8, resizeMode: 'cover', marginTop: 10 }} />
                    <ThemedText style={{ fontSize: 10 }}>{item.title}</ThemedText>
                    <ThemedView style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'left', alignItems: 'center', width: '90%', marginTop: 5 }}>
                      <ThemedText style={{ fontSize: 10, color: 'red', textAlign: 'left' }}>￥{item.price} 【会员价】</ThemedText>
                      <ThemedText style={{ color: 'gray', textDecorationLine: 'line-through' }}>￥{item.sale}</ThemedText>
                    </ThemedView>
                  </ThemedView>
                </TouchableOpacity>
              ))
            }
          </ThemedView>
        </ThemedView>
        {/* 用品 */}
        <ThemedView>
          <ThemedView style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', width: '100%', marginTop: 20 }}>
            <ThemedText style={{ fontWeight: 700, marginLeft: 10 }}>用品</ThemedText>
            <ThemedText style={{ marginRight: 10 }}>更多 &gt;</ThemedText>
          </ThemedView>
        </ThemedView>
        <ThemedView style={{ marginLeft: 10, marginRight: 10 }}>
          <ThemedView style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', width: '100%', marginTop: 10 }}>
            {
              supplies.map((item, index) => (
                <TouchableOpacity
                  key={index}
                  onPress={() => router.push(`/info?item=${encodeURIComponent(JSON.stringify(item))}`)}
                  activeOpacity={1} // 设置为1以避免透明度变化
                  style={{ width: '45%', alignItems: 'center', marginHorizontal: 5, marginBottom: 10 }}
                >
                  <ThemedView key={item.id} style={{ width: '100%', alignItems: 'center', marginHorizontal: 5, marginBottom: 10 }}>
                    <Image source={{ uri: item.src }} style={{ width: '100%', aspectRatio: 0.8, resizeMode: 'cover', marginTop: 10 }} />
                    <ThemedText style={{ fontSize: 10 }}>{item.title}</ThemedText>
                    <ThemedView style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'left', alignItems: 'center', width: '90%', marginTop: 5 }}>
                      <ThemedText style={{ fontSize: 10, color: 'red', textAlign: 'left' }}>￥{item.price} 【会员价】</ThemedText>
                      <ThemedText style={{ color: 'gray', textDecorationLine: 'line-through' }}>￥{item.sale}</ThemedText>
                    </ThemedView>
                  </ThemedView>
                </TouchableOpacity>
              ))
            }
          </ThemedView>
        </ThemedView>
      </ScrollView>
    </ThemedView>
  )
}

